
<script>
import MyPagination from '@/components/my-pagination'
import request from '@/utils/request'
import { onSecondConfirm } from '@/utils'
import MySearch from '@/components/my-search'
import MyDialog from '@/components/my-dialog'
import router from '@/router'

export default {
  components: {
    MyPagination,
    MySearch,
    MyDialog
  },
  props: {
    columns: Array, // 表格列配置
    actionUrl: String, // 请求表格数据的路径
    hasSearch: Boolean, // 是否配置搜索功能
    searchData: Array, // 搜索数据配置
    heardOperation: Array, // 添加、批量删除表格数据的头部按钮配置
    formOptionItems: Array, // 添加/编辑的表单项配置
    onlyReadFormItems: Array, // 查看表单的配置项
    hasSelect: Boolean, // 是否配置多选项
    tableData: Array
  },
  data() {
    return {
      visible: false,
      // tableData: [],
      total: 0,
      loading: false,
      handlerSubmit: {}, // 表单提交配置项
      pageParams: {
        page: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    index() {
      return this.pageParams.page > 1
        ? (this.pageParams.page - 1) * this.pageParams.pageSize + 1
        : 1
    }
  },
  created() {
    this.getList(this.pageParams)
  },
  methods: {
    // 获取表格数据
    async getList(params) {
      this.loading = true
      const res = await request({
        url: this.actionUrl,
        params
      })
      this.tableData = res.rows
      this.total = res.total
      if (!this.total) {
        this.pageParams.page = 1
      }
      this.loading = false
    },
    // 分页改变操作
    async handlerPageChange(val) {
      // 更新参数 刷新数据
      this.pageParams = val
      this.getList(this.pageParams)
    },
    // 表格行内操作
    handleOperation(operation, row) {
      operation.name === 'delete' && this.onDelById(operation, row)

      if (!operation.path) {
        // 走弹窗
        if (operation.name === 'edit') {
          // 编辑
          this.visible = true
          this.handlerSubmit = {
            name: 'edit',
            url: operation.url,
            detailUrl: operation.detailUrl + '/' + row.id
          }
        } else if (operation.name === 'read') {
          // 查看
          this.visible = true
          this.handlerSubmit = {
            name: 'read',
            detailUrl: operation.detailUrl + '/' + row.id
          }
        }
      } else {
        // 走二级路由
        router.push(operation.path + row.id)
      }
    },
    // 表格外的按钮操作
    handlerHeardOperation(item) {
      if (!item.handler.path) {
        // 走弹出框
        if (item.name === 'add') {
          this.visible = true
          this.handlerSubmit = { name: 'add', url: item.handler.url }
        }
      } else {
        // 走二级路由
        router.push(item.handler.path)
      }
    },
    // 行内删除
    onDelById(operation, row) {
      // 二次确认
      onSecondConfirm({
        content: operation.title,
        handler: async() => {
          await request({
            url: operation.url + '/' + row.id,
            method: 'delete'
          })
          this.$message.success('删除成功!')
          this.getList()
        }
      })
    },
    // 搜索执行
    onSearch(val) {
      const params = Object.assign(this.pageParams, val)
      this.getList(params)
    },
    // 表格提交执行
    onSubmit() {
      // 刷新列表
      this.getList()
    },
    renderColumns() {
      return this.columns.map((column) => {
        return (
          <el-table-column
            key={column.prop}
            prop={column.prop}
            label={column.label}
          >
            {column.render}
          </el-table-column>
        )
      })
    },

    renderTable() {
      return (
        <el-table
          data={this.tableData}
          style='width: 100%'
          header-cell-style={{ backgroundColor: '#f4f6f8' }}
        >
          {this.hasSelect && <el-table-column type='selection' width='55' />}

          <el-table-column
            type='index'
            label='序号'
            width='50'
            index={this.index}
          />
          {this.renderColumns()}
        </el-table>
      )
    },

    renderOpt() {
      return this.heardOperation?.map((item) => (
        <el-button
          key={item.name}
          type='primary'
          size='small'
          style='margin-bottom: 20px'
          onClick={this.handlerHeardOperation(item)}
        >
          {item.title}
        </el-button>
      ))
    }
  },

  render() {
    return (
      <div>
        {this.hasSearch && (
          <my-search searchData={this.searchData} onSearch={this.onSearch} />
        )}

        {this.renderOpt()}

        {this.renderTable()}
      </div>
    )
  }
  // 其他方法...
}
</script>
